<!DOCTYPE html>
<html>

<head>
  <title>AppAuthJS Sample Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="main">
    <div class="card mdl-card mdl-shadow--2dp">
      <div class="mdl-card__title">
        <h2 class="mdl-card__title-text">AppAuth Tester</h2>
      </div>
      <div class="mdl-card__supporting-text">
        Testing the App Auth JavaScript Library.
      </div>
    </div>
    <br/>
    <div class="card mdl-card mdl-shadow--2dp">
      <button class="mdl-button mdl-js-button mdl-button--raised" id="fetchConfig">Fetch Configuration</button>
      <button class="mdl-button mdl-js-button mdl-button--raised" id="authorize">Make Authorization Request</button>
      <button class="mdl-button mdl-js-button mdl-button--raised" id="makeTokenRequest">Make Token Request</button>
    </div>
    <!-- snackbar -->
    <div id="snackbar" class="mdl-js-snackbar mdl-snackbar">
      <div class="mdl-snackbar__text"></div>
      <button class="mdl-snackbar__action" type="button"></button>
    </div>
    <br/>
    <div class="app">
      <!-- react components come here. -->
    </div>
  </div>
  <!-- extras -->
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <link rel="stylesheet" href="./app.css" />
  <!-- scripts -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="../built/app/bundle.js"></script>
  <script type="text/javascript">
    var application = null;
    var init = function () {
      application = new App(document.querySelector('#snackbar'));
      // check for authorization response if available.
      application.checkForAuthorizationResponse();

      // fetch configuration handler
      var fetchConfiguration = document.querySelector('#fetchConfig');
      fetchConfiguration.addEventListener('click', function (event) {
        application.fetchServiceConfiguration();
        event.preventDefault();
      });

      // authorize request handler
      var authorize = document.querySelector('#authorize');
      authorize.addEventListener('click', function (event) {
        application.makeAuthorizationRequest();
        event.preventDefault();
      });

      // token request handler
      var makeTokenRequest = document.querySelector('#makeTokenRequest');
      makeTokenRequest.addEventListener('click', function (event) {
        application.makeTokenRequest();
        event.preventDefault();
      });
    };
    // initialize app when MDL is ready to go.
    window.addEventListener('load', function () {
      console.log('Initializing App.');
      init();
    });
  </script>
</body>

</html>